<template>
  <div class="home">
    <el-card class="home-left">
      <post-list :post-list="postList"/>
    </el-card>
    <div>
      <el-card class=home-right>
        <!--用户信息-->
        <div class="home-right-head">
          <!--用户头像-->
          <router-link
            class="user-center-item"
            to="/personal"
            target="_blank"
          >
            <el-avatar v-if="avatar" :src="avatarUrl" shape="square" :size="64"/>
          </router-link>
          <div class="head-right">
            <!--会员-->
            <div class="vip-info">
              <span v-if="vipLevel > 1" class="userInfo-vip2">年度大会员</span>
              <span v-else-if="vipLevel > 0" class="userInfo-vip1">正式会员</span>
              <span v-else class="userInfo-vip0">开通会员</span>
            </div>
            <!--硬币-->
            <div class="userInfo-coin">
              <el-icon class="el-icon-coin"></el-icon>
              <span>{{ coin }}</span>
            </div>
          </div>
        </div>
        <!--用户昵称-->
        <div class="nickname">
          <router-link
            class="user-center-item"
            to="/personal"
            target="_blank"
          >{{ nickname }}
          </router-link>
        </div>
      </el-card>
      <el-card class="home-right-2">
        <!--关注的吧-->
        <div v-for="bar in followBarList" :key="bar.id" class="bar-follow" @click="openBarPage(bar.id)">
          {{ bar.name }}
        </div>
      </el-card>
    </div>
    <el-backtop></el-backtop>
  </div>
</template>

<script>
import PostList from '@/components/PostList'
import { getHomePostList } from '@/api/post'
import { baseUrl } from '@/utils/const'
import { getFollowBar } from '@/api/bar'
import { getId } from '@/utils/auth'

export default {
  name: 'home',
  components: { PostList },
  data () {
    return {
      postList: [],
      followBarList: [],
      postNum: 10,
      getPost: true
    }
  },
  computed: {
    avatar () {
      return this.$store.getters.avatar
    },
    avatarUrl () {
      return baseUrl + this.avatar
    },
    nickname () {
      return this.$store.getters.nickname
    },
    vipLevel () {
      return this.$store.getters.vipLevel
    },
    coin () {
      return this.$store.getters.coin
    }
  },
  watch: {
    $route () {
      if (this.$route.path !== '/home') {
        // console.log('离开页面')
        window.removeEventListener('scroll', this.handle)
      } else {
        window.addEventListener('scroll', this.handle)
      }
    }
  },
  created () {
    this.getHomePostList(this.postNum)
    this.getFollowBar()
  },
  mounted () {
    window.addEventListener('scroll', this.handle)
  },
  methods: {
    async getHomePostList (num) {
      const res = await getHomePostList(num)
      this.postList = res.postList
    },
    // 获取关注的吧
    async getFollowBar () {
      const res = await getFollowBar(getId())
      this.followBarList = res.barList
    },
    // 进入吧
    openBarPage (id) {
      const routeData = this.$router.resolve({
        path: '/barPage',
        query: {
          id: id
        }
      })
      window.open(routeData.href)
    },
    // 处理滚动
    handle (e) {
      if (e.target.scrollingElement.clientHeight + e.target.scrollingElement.scrollTop + 1 >= e.target.scrollingElement.scrollHeight) {
        // console.log('滚动到底部')
        this.postNum += 10
        if (this.getPost) {
          this.getHomePostList(this.postNum)
          if (this.postList.length < this.postNum) {
            this.getPost = false
          }
        }
      }
    }
  }
}
</script>

<style scoped lang="less">
.home {
  width: 900px;
  margin: 10px auto;
  display: flex;

  .el-card {
    background-color: @white;
  }

  .home-left {
  }

  .home-right {
    margin-left: 10px;
    width: 270px;
    height: 150px;
    padding: 10px;

    .home-right-head {
      display: flex;
      justify-content: space-evenly;
      padding: 20px;

      .el-avatar {
        margin-right: 10px;
      }

      .head-right {
        display: flex;
        flex-direction: column;
        justify-content: space-evenly;

        .vip-info {
          margin-bottom: 2px;
          margin-top: 2px;
          display: flex;
          justify-content: center;

          .userInfo-vip2 {
            display: inline-block;
            box-sizing: border-box;
            padding: 2px 4px;
            background-color: @nickname;
            color: rgb(255, 255, 255);
            font-size: 12px;
            font-weight: lighter;
            border-radius: 4px;
            cursor: pointer;
          }

          .userInfo-vip1 {
            box-sizing: border-box;
            border: 1px solid @nickname;
            color: @nickname;
            border-radius: 4px;
            cursor: default;
            font-size: 12px;
            font-weight: lighter;
            padding: 1px 4px;
          }

          .userInfo-vip0 {
            box-sizing: border-box;
            color: @menuColor;
            border-radius: 4px;
            cursor: pointer;
            font-size: 12px;
            font-weight: lighter;
            padding: 2px 4px;
          }
        }

        .userInfo-coin {
          text-align: center;
          font-size: 12px;
          padding: 2px;
        }
      }
    }

    .nickname {
      margin: 0 auto;
      width: 196px;
      color: @pink;
      font-weight: 700;
      text-align: center;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
  }

  .home-right-2 {
    width: 270px;
    //height: 300px;
    padding: 10px;
    margin-left: 10px;
    margin-top: 10px;

    .bar-follow {
      border: 1px solid @borderBase;
      padding: 10px;
      margin-bottom: 10px;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      border-radius: 4px;
      cursor: pointer;
    }

    .bar-follow:hover {
      color: @menuColor;
    }
  }
}
</style>
